<template>
	<div class="max">
		<my-header :backBtn="!checking"></my-header>
		<div class="cont-nof">
			<div class="max oh" v-if="step<5">
				<div class="step">
					步骤 {{step}}
					<label style="font-weight: normal" v-if="step===1">信息查询</label>
					<label style="font-weight: normal" v-if="step===2">家长信息</label>
					<label style="font-weight: normal" v-if="step===3">宝贝人脸</label>
					<label style="font-weight: normal" v-if="step===4">信息确认</label>
				</div>
				<div class="infoBox oh">
					<div class="shadow" style="margin-top: 4rem;">
						<div v-show="step===1">
							<div class="infoTitle">请确认学生信息</div>
							<div class="infoList">
								<div class="fl infoItem">学校名称</div>
								<div class="fl infoItem1">
									<select class="weui-select db_inline school-select" @change="queryFn" v-model="searchForm.kindergartenId">
										<option :value="item.id" v-for="item in kindergartenList" :key="item.id">{{item.name}}</option>
									</select>
								</div>
							</div>
							<div class="infoList">
								<div class="fl infoItem">学生姓名</div>
								<div class="fl infoItem1">
									<input class="weui-input weui-input_border-bottom" type="text" placeholder="请输入学生姓名" v-model="searchForm.name"
									 @input="queryFn">
								</div>
							</div>
							<div>
								<div class="infoItem infoItem3">查询到的学生信息</div>
								<div class="selectInfo">
									<div class="selectInfo_list tl" v-for="item in studentList" :class="item.id==active.id?'select':''" @click="selectStu(item)">
										<span style="width: 100%;">班级：{{item.clazzName}}</span>
										<span style="width: 33.3%;">编号：{{item.code}}</span>
										<span style="width: 33.3%;">姓名：{{item.name}}</span>
										<span style="width: 33.3%;">性别：{{item.sex}}</span>
									</div>
								</div>
							</div>
						</div>
						<div v-show="step===2||step===4">
							<div class="infoTitle" v-if="step==3">请确认绑定信息</div>
							<div class="infoItem3">学生信息</div>
							<div class="selectInfo_list_1 db_inline tl">
								<span style="width: 100%;">学校：{{parmasData.kindergartenName}}</span>
								<span style="width: 100%;">班级：{{parmasData.clazzName}}</span>
								<span style="width: 33.3%;">编号：{{parmasData.stuCode}}</span>
								<span style="width: 33.3%;">姓名：{{parmasData.studentName}}</span>
								<span style="width: 33.3%;">性别：{{parmasData.stuSex}}</span>
							</div>
							<div v-show="step===2">
								<div class="infoTitle infoTitle_1">请输入家长信息</div>
								<div class="infoList">
									<div class="fl infoItem">家长姓名</div>
									<div class="fl infoItem1">
										<input class="weui-input weui-input_border-bottom" type="text" placeholder="请输入您的姓名" v-model="parmasData.kinsfolkName">
									</div>
								</div>
								<div class="infoList">
									<div class="fl infoItem">联系方式</div>
									<div class="fl infoItem1">
										<input class="weui-input weui-input_border-bottom" type="text" placeholder="请输入您的联系方式" v-model="parmasData.phone">
									</div>
								</div>
								<div class="infoList">
									<div class="fl infoItem">家长身份</div>
									<div class="fl infoItem1">
										<div class="flex kinsfolkList">
											<span class="kinsfolk" v-for="item in kinsfolk" @click="selectKinsfolk(item)" :class="{'active':selection===item}">{{item}}</span>
										</div>
										<input class="weui-input weui-input_border-bottom" style="margin-top: 1rem;" v-if="selection=='其他'" v-model="parmasData.role"
										 type="text" placeholder="请输入您的家长身份">
									</div>
								</div>
							</div>
							<div v-show="step===4">
								<div>
									<div class="infoItem3 infoItem3_1">家长信息</div>
									<div class="selectInfo_list tl" style="border: none;">
										<span style="width: 50%;">姓名：{{parmasData.kinsfolkName}}</span>
										<span style="width: 50%;">身份：{{parmasData.role}}</span>
										<span style="width: 100%;">联系方式：{{parmasData.phone}}</span>
									</div>
								</div>
							</div>
						</div>
						<div v-show="step===3">
							<div class="weui-msg" v-if="parmasData.isRegisterFace">
								<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
								<div class="weui-msg__text-area">
									<h2 class="weui-msg__title">人脸已录入</h2>
									<p class="weui-msg__desc">您的孩子【<label style="font-weight: bold">{{parmasData.studentName}}</label>】人脸信息已经录入，您无需重新录入。
									</p>
								</div>
							</div>
							<div v-else>
								<div class="infoTitle">请录入人脸信息</div>
								<photograph ref="Upload" @accept-file="acceptFile" @reset-file="resetFile"></photograph>
								<div style="text-decoration:underline;position: relative;left: 12rem" @click="skipFn">跳过</div>
							</div>
						</div>
					</div>
				</div>
				<div class="turning">
					<div class="fl" style="left: 0;" @click="step--" v-if="step>1">上一步</div>
					<div class="pa" style="left: 50%; transform: translateX(-50%);">{{step}} /4</div>
					<div class="fr" style="right: 0;" @click="netStep" v-if="step<4">下一步</div>
					<div class="fr" style="right: 0;" @click="sumitFn" v-if="step===4">提交审核</div>
				</div>
			</div>
			<div class="weui-msg" v-else>
				<div class="weui-msg__text-area">
					<h2 class="weui-msg__title">绑定审核中</h2>
					<div class="weui-msg__desc-primary tc">
						<div class="weui-msg__desc infoItem3_1">学生信息</div>
						<div class="selectInfo_list_1 db_inline tl">
							<span style="width: 100%;">学校：{{parmasData.kindergartenName}}</span>
							<span style="width: 100%;">班级：{{parmasData.clazzName}}</span>
							<span style="width: 33.3%;">编号：{{parmasData.stuCode}}</span>
							<span style="width: 33.3%;">姓名：{{parmasData.studentName}}</span>
							<span style="width: 33.3%;">性别：{{parmasData.stuSex}}</span>
						</div>
						<div class="weui-msg__desc infoItem3_1">家长信息</div>
						<div class="selectInfo_list tl" style="border: none;">
							<span style="width: 50%;">姓名：{{parmasData.kinsfolkName}}</span>
							<span style="width: 50%;">身份：{{parmasData.role}}</span>
							<span style="width: 100%;">联系方式：{{parmasData.phone}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import photograph from '@/components/photograph.1.vue';
	import wx from "weixin-js-sdk";

	export default {
		components: {
			photograph
		},
		data() {
			let openId = this.$route.query.openId;
			let type = this.$route.query.type;
			return {
				kindergartenList: [],
				studentList: [],
				active: 0,
				step: 1,
				title: '',
				openId: openId,
				addType: type,
				validation: false,
				kinsfolk: ['爸爸', '妈妈', '其他'],
				selection: '',
				kinsfolkForm: { //家长信息
					role: '',
					name: '',
					phone: '',
					sex: '男',
				},
				searchForm: { //搜索信息
					kindergartenId: 0,
					name: '',
				},
				stuInfo: {}, //查询到的学生信息
				checking: false,
				parmasData: {
					isRegisterFace: false,
					kindergartenName: '',
					kindergartenId: '',
					studentId: '',
					studentName: '',
					stuSex: '',
					stuCode: '',
					clazzName: '',
					openId: '',
					clazzId: '',
					kinsfolkId: '',
					kinsfolkName: '',
					faceImage: '',
					phone: '',
					role: '',
					sex: '',
				}
			}
		},
		computed: {
			sexSelect() {
				let data = {
					visible: false,
					list: ['男', '女']
				};
				if (this.selection === '其他') {
					data.visible = true;
				}
				return data
			}
		},
		methods: {
			getParameterFromUrl(val) {
				let uri = window.location.href;
				if (!uri) {
					uri = window.location.search;
				}
				let re = new RegExp("" + val + "=([^&?]*)", "ig");
				return uri.match(re) ? uri.match(re)[0].substr(val.length + 1) : null;
			},
			queryFn() { //查找学生信息
				if (this.searchForm.name) {
					this.$http.fetchKindergartenStu(this.searchForm).then(resp => {
						this.studentList = resp.data;
						if (resp.data.length > 0) {
							this.selectStu(resp.data[0])
						}
					})
				}
			},
			selectStu(stu) {
				this.active = stu;
				let kList = this.kindergartenList.filter(k => k.id === this.searchForm.kindergartenId);
				this.parmasData.kindergartenName = kList.length > 0 ? kList[0].name : '';
				this.parmasData.studentId = stu.id;
				this.parmasData.studentName = stu.name;
				this.parmasData.stuSex = stu.sex;
				this.parmasData.stuCode = stu.code;
				this.parmasData.clazzName = stu.clazzName;
				this.parmasData.clazzId = stu.clazzId;
				this.parmasData.isRegisterFace = stu.face.length > 5;
			},
			selectKinsfolk(item) {
				this.selection = item;
				this.parmasData.role = '';
				if (item != '其他') {
					this.parmasData.role = item;
				}
			},
			netStep() {
				let step = this.step;
				let addType = this.addType;
				if (step === 1) {
					if (!this.searchForm.kindergartenId || !this.searchForm.name) {
						this.$weui.topTips('请输入搜索条件');
						return;
					}
					if (!this.parmasData.studentId) {
						this.$weui.topTips('选择学生');
						return;
					}
					if (!this.parmasData.openId) {
						this.$weui.topTips('系统繁忙，即将关闭');
						wx.closeWindow();
						return;
					}
				} else if (step === 2) {
					if (!this.parmasData.kinsfolkName || !this.parmasData.phone || !this.parmasData.role) {
						this.$weui.topTips('请填写家长信息');
						return;
					}
					if (!(/^1[3456789]\d{9}$/.test(this.parmasData.phone))) {
						this.$weui.topTips('输入的手机号码有误');
						return false
					}
				}
				this.step++;
			},
			skipFn() {
				this.$refs.Upload.reset();
				this.step++;
			},
			acceptFile(fileName) {
				this.parmasData.faceImage = fileName;
			},
			resetFile() {
				this.parmasData.faceImage = '';
			},
			toast(text, type) {
				let _this = this;
				this.$toast.show(text, type)
				setTimeout(function() {
					_this.$toast.hide()
				}, 1000);
			},
			bind() {
				let r = this.valiFn();
				if (r) {
					this.validation = true;
				}
			},
			sumitFn() {
				this.$toast.show('审核提交中', 'loading');
				this.parmasData.kindergartenId = this.searchForm.kindergartenId;
				if (this.addType === 'second') {
					this.$http.bindSecondChild(this.parmasData).then(resp => {
						this.$toast.hide();
						this.validation = false;
						this.checking = true;
						this.step++;
					})
				} else {
					//提交数据
					this.$http.bindStu(this.parmasData).then(resp => {
						this.$toast.hide();
						this.validation = false;
						this.checking = true;
						this.step++;
					})
				}
			},
			fetchKindergartenList() {
				this.$http.fetchKindergartenList({
					merchantId: this.parmasData.merchantId
				}).then(resp => {
					this.kindergartenList = resp.data;
					if (this.kindergartenList.length > 0) {
						this.searchForm.kindergartenId = this.kindergartenList[0].id;
					}
				})
			}

		},
		created() {
			this.parmasData.openId = this.getParameterFromUrl("openId");
			this.parmasData.merchantId = this.getParameterFromUrl("merchantId");
			this.parmasData.kinsfolkName = this.$route.query.name;
			this.parmasData.phone = this.$route.query.phone;
		},
		mounted() {
			this.fetchKindergartenList();
		}
	}
</script>

<style scoped>
	.info {
		width: 50%;
		margin: 1rem 0;
	}

	.info-long {
		width: 100%;
	}

	.submitBtn {
		width: 96%;
		margin: 2rem auto;
	}

	.kinsfolkList {
		justify-content: space-between;
	}

	.kinsfolk {
		padding: 0.1rem 0.5rem;
		border-radius: 5px;
	}

	.kinsfolk.active {
		color: #fff;
		background: #2aa7e1;
	}

	.sexList {
		justify-content: flex-start;
	}

	.sexList .kinsfolk {
		margin-right: 5rem;
	}

	.kinsfolk-input {
		margin-top: 2rem;
	}

	.checkTips {
		position: absolute;
		top: 0;
		left: 0;
		background: cadetblue;
		z-index: 999;
	}

	.step {
		width: 90%;
		margin: 1.5rem auto 0;
		text-align: left;
		font-size: 2rem;
		font-weight: bold;
		background: rgb(250, 250, 250);
	}

	.infoBox {
		width: 90%;
		height: 80%;
		margin: auto;
		text-align: center;
		font-size: 1.4rem;
	}

	.infoBox>div {
		width: 98%;
		margin: auto;
		padding: 1rem;
		box-sizing: border-box;
	}

	.infoBox .infoTitle,
	.infoBox .infoList {
		width: 100%;
		margin-bottom: 1.7rem;
	}

	.infoBox .infoTitle {
		font-size: 1..8rem;
	}

	.infoTitle_1 {
		margin-top: 1.7rem;
	}

	.infoBox .infoList,
	.infoItem3 {
		text-align: left;
		display: inline-block;
		margin-bottom: 0.5rem;
	}

	.infoItem3 {
		width: 100%;
		text-align: center;
	}

	.infoItem3_1 {
		margin-top: 2rem;
	}

	.infoList .infoItem {
		width: 30%;
		height: 100%;
		padding: 0.2rem 0;
	}

	.infoList .infoItem1 {
		width: 70%;
		height: 100%;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.infoBox .selectInfo {
		width: 100%;
		min-height: 7rem;
		max-height: 28rem;
		border: 1px solid rgba(0, 0, 0, 0.1);
		overflow: auto;
	}

	.infoBox .selectInfo_list,
	.infoBox .selectInfo_list_1 {
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		width: 100%;
		padding: 0.5rem 0;
	}

	.infoBox .selectInfo_list {
		height: 7rem;
	}

	.selectInfo_list span,
	.selectInfo_list_1 span {
		float: left;
		height: 50%;
		line-height: 3rem;
	}

	.selectInfo_list.select {
		background: #2aa7e1;
		color: #fff;
	}

	.turning {
		height: 3rem;
		line-height: 3rem;
		width: 90%;
		margin: 0 auto;
	}

	/* 人脸录入 */
	.file {
		position: relative;
		display: inline-block;
		background: #D0EEFF;
		border: 1px solid #99D3F5;
		border-radius: 5px;
		overflow: hidden;
		color: #1E88C7;
		text-decoration: none;
		top: -0.6rem;
		line-height: 2rem;
	}

	.file input {
		position: absolute;
		right: 0;
		top: 0;
		opacity: 0;
	}

	.file:hover {
		background: #AADFFD;
		border-color: #78C3F3;
		color: #004974;
		text-decoration: none;
	}

	.photoTips {
		text-align: left;
		margin: 1rem 0px 0px 2rem;
		font-size: 1.5rem;
		line-height: 4rem;
		color: #767676;
	}

	.cameraIcon {
		width: 8rem;
		margin: 5rem auto;
		border: 1px solid #2aa7e1;
		border-radius: 5px;
		background: rgba(42, 167, 225, 0.1);
	}
</style>
